<script setup>
import { ref } from 'vue';
import request from '../axios/axios.js'
//用户id
let inputUserId= ref('');
//寝室id
let inputDormitoryId=ref("");
//充值费用
let inputUserFee=ref("");

//发送信息
async function depositMonkey(){
    let {data} = await request.get("/addDepositMonkey",{
        params:{
            userId:inputUserId.value,
            dormitoryId:inputDormitoryId.value,
            userFee:inputUserFee.value
        }
    })
    //添加寝室信息
    if(data.statusCode==200){
        alert(data.message);
    }else{
        alert(data.message);
    }
}



</script>

<template>
    管理员水电费充值记录界面
    水电费增加

    <div class="Dormitory ">
        
        <div style="width: 100%; height: 80%;" >
            <!-- 寝室信息展示 -->
            <table class="tableStyle">
                
                <tr class="trb">
                    <td class="name">用户名id</td ><td class="content"  > <input type="text"  v-model="inputUserId" /></td>
                </tr>
                <tr class="trb">
                    <td class="name">寝室id</td ><td class="content"  > <input type="text"  v-model="inputDormitoryId" /></td>
                </tr>
                <tr class="trb">
                    <td class="name">充值金额</td ><td class="content"  > <input type="text"  v-model="inputUserFee" /></td>
                </tr>
                      
            </table>
        </div>
        <div class="DormitoryName">
           
           增加充值记录:<button @click="depositMonkey()" class="btnStyle">添加</button>
        </div>
    </div>
</template>

<style scoped>

.name{   
      width: 10%;
   }
   .trb{
      background-color: beige;
      height: 10%;
   }
   .tb_content{
      width: 100%;
      height: 100%;
      background-color: rgb(238, 245, 205);
      /* background-image: url(../public/img/bg02.jpg);
      background-size: 100%; */
   }
   .trb:hover{
      background-color: chartreuse;
   }
   .trb:active{
      background-color:rgb(230, 26, 26);
   }
   /*
        用户查询
   */
   .Despoit{
    width: 100%;
    height: 80%;
    background-color: chocolate;
   }


   /* 
    寝室信息展示
   */
   .Dormitory{
    width: 100%;
    height: 100%;

   }
   .showQuery{
    width: 100%;
    height: 100%;

   }
   .DormitoryName{
    width: 100%;
    height: 20%;

   }
   /**
    表格样式
   */
   .tableStyle{
    width: 80%;
    height: 60%;
    /**
        居中
    */
    position: relative;
    top: 20%;
    border: 1px solid;
    border-radius: 10px;

   }


      /**
    按钮样式
    */
    .btnStyle{
            height: 43px;   
            width: 80px;
            border-radius: 10px;
            border: 0px;
            background-color: rgb(162, 241, 108);
        }
        .btnStyle:hover{
            background-color: aqua;
        }
        .btnStyle:active{
            background-color: rgb(125, 139, 179);
        }
</style>
